﻿@model SmartStore.OfflinePayment.Models.ManualPaymentInfoModel

@{
	Layout = "";
}

@Html.Hidden("OfflinePaymentMethodType", "Manual")

@if (Model.ThumbnailUrl.HasValue())
{
	<div class="media">
		<img class="media-object img-fluid pr-2" src="@Model.ThumbnailUrl">
		<div class="media-body">
			@Html.Raw(Model.DescriptionText)
		</div>
	</div>
}
else
{
	<div class="text-muted">
		@Html.Raw(Model.DescriptionText)
	</div>
}


<div class="opt-form">
    <div class="form-group row">
        @Html.LabelFor(model => model.CreditCardTypes, new { @class = "col-md-3 col-form-label required" })
        <div class="col-md-9">
            @Html.DropDownListFor(model => model.CreditCardType, Model.CreditCardTypes, new { @class = "form-control noskin" })
        </div>
    </div>

    @Html.ControlGroupFor(model => model.CardholderName, required: true, breakpoint: "md")
    @Html.ControlGroupFor(model => model.CardNumber, required: true, breakpoint: "md")

    <div class="form-group row">
        @Html.LabelFor(model => model.ExpireMonth, new { @class = "col-md-3 col-form-label required" })
        <div class="col-md-9">
            <div class="row sm-gutters">
                <div class="col-6">
                    @Html.DropDownListFor(model => model.ExpireMonth, Model.ExpireMonths, new { @class = "form-control noskin" })
                </div>
                <div class="col-6">
                    @Html.DropDownListFor(model => model.ExpireYear, Model.ExpireYears, new { @class = "form-control noskin" })
                </div>
            </div>
        </div>
    </div>

    @Html.ControlGroupFor(model => model.CardCode, required: true, breakpoint: "md")
</div>